<template>
    <div id="meQrcode" :title="qrText">
        <div class="qrcode_box" style="margin: 5px auto;text-align: center">
            <img
                    class="qrcode_canvas"
                    id="qrcode_canvas"
                    ref="qrcode_canvas"
                    alt="二维码本图"
            />
            <canvas
                    :width="qrSize"
                    :height="qrSize"
                    class="canvas"
                    ref="canvas"
            ></canvas>
            <br/>
            <a-button type="primary"  style="margin-left: 10px"  @click="download()">下载</a-button>
        </div>
    </div>
</template>
<script>
    import QRCode from "qrcode";
    export default {
        props: {
            qrUrl: {
                type: String,

            },
            qrSize: {
                type: Number,
                default: 500
            },
            qrText: {
                type: String,
                default: "百度一下，也不知道"
            },
            qrLogo: {
                type: String,

            },
            qrLogoSize: {
                type: Number,
                default: 40
            },
            qrTextSize: {
                type: Number,
                default: 20
            }
        },
        data() {
            return {

            };
        },
        watch:{
            qrUrl(val){
                console.log('watch' +val)
                this.handleQrcodeToDataUrl();
            },
            qrText(val){
                console.log('watchText' +val)
            }
        },
        mounted() {
            this.handleQrcodeToDataUrl();
        },
        updated() {
            this.handleQrcodeToDataUrl();
        },
        methods:{
            download(){
                var img = document.getElementById('qrcode_canvas');
                var url = img.src;
                console.log(url)
                var a = document.createElement('a');          // 创建一个a节点插入的document
                var event = new MouseEvent('click')
                var c = this.qrText
                // console.log(c)
                // var reg = new RegExp(".","g");
                // var b = c.replace(reg,"");
                // console.log('23333')
                if(c.indexOf('.') != -1){
                    c ="存在特殊字符的下载二维码"
                }
                a.download = c          // 设置a节点的download属性值
                a.href = url;                                 // 将图片的src赋值给a节点的href
                a.dispatchEvent(event)
            },
            handleQrcodeToDataUrl() {
                let qrcode_canvas = this.$refs.qrcode_canvas;
                let canvas = this.$refs.canvas;
                const that = this;
                QRCode.toDataURL(
                    this.qrUrl,
                    { errorCorrectionLevel: "H",version:10 },
                    (err, url) => {
                        qrcode_canvas.src = url;
                        // 画二维码里的logo// 在canvas里进行拼接
                        let ctx = canvas.getContext("2d");
                        setTimeout(() => {
                            //获取图片
                            ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
                            if (that.qrText) {
                                //设置字体
                                ctx.font = "bold " + that.qrTextSize + "px Arial";
                                let tw = ctx.measureText(that.qrText).width; //文字真实宽度
                                let ftop = that.qrSize - that.qrTextSize; //根据字体大小计算文字top
                                let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
                                let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
                                ctx.fillStyle = "#fff";
                                ctx.fillRect(
                                    fleft - tp / 2,
                                    ftop - tp / 2,
                                    tw + tp,
                                    that.qrTextSize + tp
                                );
                                ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
                                ctx.fillStyle = "#333";
                                ctx.fillText(that.qrText, fleft, ftop);
                            }
                            qrcode_canvas.src = canvas.toDataURL();
                        }, 0);
                    }
                );
            },

        }


     };
</script>
<style scoped>
    .qrcode_box,
    #meQrcode {
        display: inline-block;
    }
    .qrcode_box img {
        display: none;
    }
</style>